
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.fade-enter-from {
    opacity: 0;
}

.fade-enter-to {
    opacity: 1;
}

.fade-leave-to {
    opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.slide-right-enter-from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
}

.slide-right-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
}

.slide-top-enter-active,
.slide-top-leave-active {
    transition: transform 0.3s ease,
    opacity 0.3s ease;
    will-change: transform, opacity;
}

.slide-top-enter-from {
    transform: translateY(20px);
    opacity: 0;
}

.slide-top-enter-to {
    transform: translateY(0);
    opacity: 1;
}

.slide-top-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.slide-bottom-enter-active,
.slide-bottom-leave-active {
    transition: transform 0.3s ease,
    opacity 0.3s ease;
    will-change: transform, opacity;
}

.slide-bottom-enter-from {
    transform: translateY(-20px);
    opacity: 0;
}

.slide-bottom-enter-to {
    transform: translateY(0);
    opacity: 1;
}

.slide-bottom-leave-to {
    transform: translateY(20px);
    opacity: 0;
}


/*定义全局变量*/
:root {
    --menu-height: 46px;
    /* 菜单背景颜色 */
    --el-menu-bg-color: #304106;
    /* 菜单文字颜色 */
    --el-menu-text-color: #fff;
    /* 选中项文字颜色 */
    --el-menu-active-color: #ffd04b;
/* 滚动条宽度 */
--scrollbar-width: 4px;
/* 滚动条轨道的背景颜色 */
--scrollbar-track-color: #fff;
/* 滚动条滑块的背景颜色 */
--scrollbar-thumb-color: #BFBFBF;
/* 鼠标悬浮到滑动上时的滑块颜色 */
--scrollbar-thumb-hover-color: #777;
/* 滚动条边框圆角宽度 */
--scrollbar-thumb-border-radius: 4px;
}


/* 滚动条Chrome、Safari等WebKit内核浏览器 */
/* 设置滚动条的轨道宽度 */
::-webkit-scrollbar {
    /*滚动条轨道宽度*/
    width: var(--scrollbar-width);
}

/* 设置滚动条的轨道背景颜色 */
::-webkit-scrollbar-track {
    /*轨道的背景颜色*/
    background-color: var(--scrollbar-track-color);
}

/* 设置滚动条的轨道滑块的背景颜色和边框圆角 */
::-webkit-scrollbar-thumb {
    /*滑动的背景颜色*/
    background-color: var(--scrollbar-thumb-color);
    /*滑块的圆角边框*/
    border-radius: var(--scrollbar-thumb-border-radius);
}

/* 设置滚动条的轨道滑块，鼠标悬浮之后的背景颜色 */
::-webkit-scrollbar-thumb:hover {
    /*鼠标悬浮之后，滑动的背景颜色*/
    background-color: var(--scrollbar-thumb-hover-color);
}

/* 适配 Firefox 浏览器 */
@-moz-document url-prefix() {
    /* 可以设置为thin、auto或none等，这里设置为较窄的滚动条 */
    scrollbar-width: thin;
    /* 滑块轨道的颜色 */
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}